<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <META HTTP-EQUIV="pragma" CONTENT="no-cache"> 
    <META HTTP-EQUIV="Cache-Control" CONTENT="no-cache, must-revalidate">
    <META HTTP-EQUIV="expires" CONTENT="0">
    <link rel="stylesheet" href="../../../js/layui/css/layui.css" media="all">
</head>
<body>
<div class="layui-form-item">
    <div class="layui-form-item productTable" >
        <label class="layui-form-label">商品名：</label>
        <div class="layui-inline">
            <input type="text" name="id" id="productName" required  lay-verify="required" placeholder="请输入商品名" autocomplete="off" class="layui-input">
        </div>
        <div class="layui-btn-group" >
            <button type="button" data-type="search" id="search" class="layui-btn">检索</button>
            <button type="button" data-type="add" id="add" class="layui-btn">增加</button>
        </div>
        <table class="layui-hide" id="productTable" lay-filter="tableEvent"></table>
    </div>
</div>
        <script src="../../../js/layui/layui.js"></script>
        <script src="../../../js/myJQ.js"></script>

        <script>
            layui.use(['table','jquery','layer'], function(){

                var basePath = getRootPath();
                var table = layui.table;
                var $ = layui.$;
                var layer = layui.layer;
                table.render({
                    elem: '#productTable'
                    ,url:'/product/getProductList'
                    ,cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
                    ,id:'productData'
                    ,cols: [[
                        {field:'productId', width:100, title: '商品ID', sort: true}
                        ,{field:'productName', width:100, title: '商品名'}
                        ,{field:'price', width:100, title: '价格',templet:function (data) {
                                if(data.price==null||data.price==''){
                                    return "0 元"
                                }else {
                                    return data.price+"元";
                                }
                            }}
                        ,{field:'num', width:100, title: '份数',templet:function (data) {
                                if(data.num==null||data.num==''){
                                    return "0 张"
                                }else {
                                    return data.num+"张";
                                }
                            }}
                        ,{field:'img', width:100, title: '图片'}
                        ,{field:'sort', width:100, title: '排序'}
                        ,{field:'description', width:100, title: '描述'}
                        ,{field:'insertDate', width:160, title: '创建时间',templet:function (data) {
                                if(data.insertDate!=null&&data.insertDate!="")
                                    return layui.util.toDateString(data.insertDate,'yyyy-MM-dd HH:mm:ss');
                                else return ""
                            }}
                        ,{field:'updateDate',width:160, title: '更新时间',templet:function (data) {
                                if(data.updateDate!=null&&data.updateDate!="")
                                    return layui.util.toDateString(data.updateDate,'yyyy-MM-dd HH:mm:ss');
                                else return""
                            }}
                        ,{field:'caozuo',width:225, title: '操作',templet:function (data) {
                                return '<a class="layui-btn layui-btn-xs layui-btn" data-type="detail" lay-event="detail" lay-id="'+ data.id +'">' +
                                    '<i class="layui-icon layui-icon-more"></i>详情</a>' +
                                    '<a class="layui-btn layui-btn-xs layui-btn" data-type="edt" lay-event="edt" lay-id="'+ data.id +'">' +
                                    '<i class="layui-icon layui-icon-edit"></i>编辑</a>' +
                                    '<a class="layui-btn layui-btn-xs layui-btn-danger" data-type="del" lay-event="del" lay-id="'+ data.id +'">' +
                                    '<i class="layui-icon layui-icon-delete"></i>移除</a>';
                            }}
                    ]]
                });

                var active = {
                    edt:function (obj) {
                        debugger;
                    },
                    del:function (obj) {
                        debugger;
                    },
                    search:function () {
                        debugger;
                        //执行重载
                        table.reload('productData', {
                            page: {
                                curr: 1 //重新从第 1 页开始
                            }
                            ,where: {
                                productName: $('#productName').val()
                            }
                        }, 'data');
                    },
                    add:function () {
                        parent.layer.open({
                            maxmin: true, //开启最大化最小化按钮
                            type: 2,
                            resize:false,
                            title: "新增", //不显示标题栏
                            closeBtn: 2,
                            area: ['500px', '600px'],
                            shade: 0.8,
                            id: (new Date()).valueOf(), //设定一个id，防止重复弹出 时间戳1280977330748
                            btn: ['保存', '取消'],
                            btnAlign: 'r',
                            moveType: 1, //拖拽模式，0或者1
                            content: "/product/productEditPage",
                            yes: function (index, layero) {
                                debugger;
                                var load =  parent.layer.load();
                                //获取当前打开窗口的html
                                var body = parent.layer.getChildFrame('body', index);
                                var productName = body.find("#productName").val();
                                var sort = body.find("#sort").val();
                                var price = body.find("#price").val();
                                var num = body.find("#num").val();
                                var decrp = body.find("#description").val();
                                var img = body.find("#demo1").attr("fileName");
                                var imgData = body.find("#demo1").attr('src');
                                if(typeof(productName)=="undefined" || productName.trim()==''){
                                    setTimeout(function () {
                                        layer.msg('产品名不能为空',function () {
                                            time:2000
                                        });
                                    },1000);

                                }
                                var params = {};
                                params.price=price;
                                params.num=num;
                                params.productName = productName;
                                params.sort = sort;
                                params.description = decrp;
                                params.img = img;
                                params.data = imgData;
                                $.ajax({
                                    url:basePath+"/product/addProduct",
                                    dataType:'json',
                                    type:"POST",
                                    data:params,
                                    cache:false,
                                    beforeSend :function(xmlHttp){
                                        xmlHttp.setRequestHeader("If-Modified-Since","0");  //添加
                                        xmlHttp.setRequestHeader("Cache-Control","no-cache"); //添加
                                    },
                                    success:function (result) {
                                        parent.layer.msg(result.msg,{time:5000});
                                        if(result.returnValue="OK"){
                                            location.reload();
                                        }
                                        parent.layer.closeAll();
                                    }
                                });

                            },
                            btn2: function (index, layero) {
                            }
                        });
                    }
                }

                $('.productTable .layui-btn,layui-btn-group').on('click',function () {
                    var type = $(this).data('type');
                    active[type]?active[type].call(this):'';
                });

                //监听工具条
                table.on('tool(tableEvent)', function (obj) {
                    var data = obj.data, event = obj.event, tr = obj.tr; //获得当前行 tr 的DOM对象;
                    switch(event){
                        case "edt":
                            parent.layer.open({
                                maxmin: true, //开启最大化最小化按钮
                                type: 2,
                                //resize:false,
                                title: "编辑",
                                closeBtn: 2,
                                area: ['500px', '600px'],
                                shade: 0.8,
                                id: (new Date()).valueOf(), //设定一个id，防止重复弹出 时间戳1280977330748
                                btn: ['保存', '取消'],
                                btnAlign: 'r',
                                moveType: 1, //拖拽模式，0或者1
                                content: ['/product/productEditPage?productId='+data.productId,'no'],
                                success:function(layero,index){
                                    debugger;
                                    var body = parent.layer.getChildFrame('body', index);
                                    var test = body.find("#productName").val();
                                    var index = parent.layer.getFrameIndex(window.name);
                                },
                                yes: function (index, layero) {
                                    debugger;
                                    var load = parent.layer.load();
                                    //var test = data.find("#productName").val();
                                    //获取当前打开窗口的html
                                    var body = parent.layer.getChildFrame('body', index);
                                    var productId = body.find("#productId").val();
                                    var productName = body.find("#productName").val();
                                    var price = body.find("#price").val();
                                    var num = body.find("#num").val();
                                    var sort = body.find("#sort").val();
                                    var decrp = body.find("#description").val();
                                    var img = body.find("#demo1").attr("fileName");
                                    var imgData = body.find("#demo1").attr('src');
                                    if(typeof(productName)=="undefined" || productName.trim()==''){
                                        layer.msg('产品名不能为空',function () {
                                            time:2000
                                        });
                                        return false;
                                    }
                                    var params = {};
                                    params.price=price;
                                    params.num=num;
                                    params.productId = productId;
                                    params.productName = productName;
                                    params.sort = sort;
                                    params.description = decrp;
                                    params.img = img;
                                    params.data = imgData;
                                    var url = "/product/updateProduct";
                                    $.ajax({
                                        url:basePath+url,
                                        dataType:'json',
                                        type:"POST",
                                        async:false,
                                        data:params,
                                        cache:false,
                                        beforeSend :function(xmlHttp){
                                            xmlHttp.setRequestHeader("If-Modified-Since","0");  //添加
                                            xmlHttp.setRequestHeader("Cache-Control","no-cache"); //添加
                                        },
                                        success:function (result) {
                                            debugger
                                            parent.layer.closeAll();
                                            layer.msg(result.msg,{time:800});
                                            if(result.returnValue="OK"){
                                                location.reload();
                                            }
                                        }
                                    });
                                },
                                btn2: function (index, layero) {
                                    console.log("取消")
                                },
                                cancel:function (index, layero) {
                                    console.log("关闭窗口")
                                }
                            });
                            break;
                        case "del":
                            debugger;
                            var params = {};
                            params.productId=data.productId;
                            $.ajax({
                                url:basePath+"/product/deleteProduct",
                                data:params,
                                dataType:'json',
                                type:'POST',
                                cache:false,
                                beforeSend :function(xmlHttp){
                                    xmlHttp.setRequestHeader("If-Modified-Since","0");  //添加
                                    xmlHttp.setRequestHeader("Cache-Control","no-cache"); //添加
                                },
                                success:function (result) {
                                    layer.msg(result.msg)
                                    location.reload();
                                }
                            });
                            break;
                        case "detail":
                            window.location.href=basePath+"/product/productDetailPage?productId="+data.productId;
                    }
                });

            });


        </script>
</body>
</html>